<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css盒模型和文本溢出</title>
<style>
*{ margin:0; padding:0;}
body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微软雅黑";}
h1,h2{padding: 20px 0;}
h3{    background: #00AA88;
    color: #FFFCF4;
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    border-radius: 4px;
    padding: 5px 0px 5px 15px;}
p{ line-height: 40px;}
ul li{ list-style: none;line-height: 40px;}
span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;}
em{ font-style: normal; color:red;}
.other{ color:#044D22;}
.oo{ color:red; display:inline; font-size:18px; font-weight:normal;}
.marleft{ margin-left:30px;}
.marbtom{ margin:15px 0; font-weight:600;}
.borderbtm{ border-bottom: solid 1px #eee;
				    padding-bottom: 15px;margin-bottom: 15px;}
.textcon{
	    margin: 10px 0;
    border: solid 1px #ddd;
    border-left-width: 6px;
    padding: 10px;
    border-radius: 4px;
    border-color: #f60;
	
}
.oos{ color:#000; font-weight:800;}
</style>
</head>

<body>
<div class="boxs">
	<h1>Day5：文本溢出</h1>
    <h2>学习目标</h2>
    <ul >
    	<li>1、页面重构</li>
    	<li>2、文本溢出相关的属性</li>
<h3>一、容器溢出相关的属性</h3>
<ul>
	<li>
		<span>1、溢出属性（容器的）</span>
    		<p><b>说明：</b></p>
    		<p><em>overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;</em></p>
	  <p>visible:默认值，溢出内容会显示在元素之外；</p>

<p>hidden：溢出内容隐藏；</p>

<p>scroll：滚动，溢出内容以滚动方式显示;</p>

<p>auto：如果有溢出会添加滚动条，没有溢出正常显示;</p>

<p>inherit：规定应该遵从父元素继承overflow属性的值。</p>
<p>overflow-x:X轴溢出；&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow-y:Y轴溢出</p>

	</li>
	<li>
		<span>2、空余空间</span>
    		<p><b>说明：</b></p>
    		<p><em>white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；</em>
</p>

<p>normal：默认值，空白会被浏览器忽略，
</p>

<p>nowrap:文本不会换行，文本会在同一行上继续，直到遇到&lt;br/&gt;标签为止；</p>

<p>pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；</p>
<p>pre-wrap：保留空白符序列，但是正常的进行换行；</p>
<p>pre-line:合并空白符序列，但是保留换行符；</p>
<p>inherit：规定应该遵从父元素继承White-space属性的值；</p>



	</li>	
	<li>
		<span>3、省略号显示</span>
    		<p><b>说明：</b></p>
    		<p><em>text-overflow:clip/ellipsis
</em> ;
</p>
<p>clip：不显示省略号（...）;</p>
<p>ellipsis：显示省略标记；</p>
<p>&nbsp;</p>
<p>说明：</p>
<p>text-overflow属性仅是...，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：</p>
<p style="color:#f00;font-weight:900">1、容器宽度：width：value；</p>
<p style="color:#f00;font-weight:900">2、强制文本在一行内显示:white-space：nowrap;</p>
<p style="color:#f00;font-weight:900">3、溢出内容为隐藏：overflow：hidden；</p>
<p style="color:#f00;font-weight:900">4、溢出文本显示省略号：text-overflow：ellipsis;</p>
<p style="color:#f00;font-weight:900">&nbsp;</p>
<p>扩展知识点：实现多行文本溢出时产生省略号<br>
  display: -webkit-box;      -webkit-box-orient: vertical;<br>
  -webkit-line-clamp: 3;       overflow: hidden;<br>
  1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：<br>
  2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。<br>
  3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。<br>
  适用范围：<br>
  因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；但文字未超出行的情况下也会出现省略号,可结合js优化该方法<br>
</p>
<p></li>
</ul>

<br />
</body>
</html>
